<template>
	<div class="system-dept-container">
		<div style="width: 20%; float: left">
			<el-input v-model="filterName" placeholder="搜索部门" />

			<el-tree
				ref="treeRef"
				class="dept_tree"
				:data="orgTreeDate"
				:load="getChildren"
				lazy
				@node-click="nodeSelect"
				highlight-current
				:expand-on-click-node="false"
				node-key="orgId"
				:filter-node-method="filterNode"
			/>
		</div>
		<div style="width: 79%; float: right">
			<!-- 查询条件-->
			<el-card shadow="hover">
				<el-form inline v-model="params" size="small">
					<el-form-item>
						<el-input v-model="params.label" placeholder="搜索名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="ml10" @click="initTableData">
							<el-icon>
								<elementSearch />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<!--分割线-->
			<el-divider></el-divider>
			<!--数据展示和分页-->
			<el-card shadow="never">
				<template #header>
					<div class="card-header">
						<span>部门表列表</span>
						<!--新增等操作区域-->
						<el-button size="small" type="success" class="ml10" @click="openAddWindow">
							<el-icon>
								<elementDocumentAdd />
							</el-icon>
							新增部门表
						</el-button>
					</div>
				</template>
				<!--表格展示区-->
				<el-table
					:data="tableData.data"
					style="width: 100%"
					default-expand-all
					row-key="orgId"
					lazy
					:load="getChildren"
					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				>
					<el-table-column align="center" label="部门ID" prop="orgId" show-overflow-tooltip />
					<el-table-column align="center" label="名称" prop="label" show-overflow-tooltip />
					<el-table-column align="center" label="父ID" prop="parentId" show-overflow-tooltip />
					<el-table-column align="center" label="树结构" prop="treePath" show-overflow-tooltip />
					<el-table-column align="center" label="排序，越小越靠前" prop="sortValue" show-overflow-tooltip />
					<el-table-column align="center" label="操作" show-overflow-tooltip width="230">
						<template #default="scope">
							<el-button type="text" @click="openEditWindow(scope.row)">修改</el-button>
							<el-popconfirm
								confirm-button-text="删除"
								cancel-button-text="取消"
								icon-color="red"
								title="确定删除这条记录吗？"
								@confirm="delRow(scope.row)"
							>
								<template #reference>
									<el-button type="text">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="params.pageNum"
					background
					v-model:page-size="params.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="tableData.total"
				>
				</el-pagination>
			</el-card>
		</div>
		<AddSysOrg ref="addRef" @initTableData="initTableData" />
		<EditSysOrg ref="editRef" @initTableData="initTableData" />
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import AddSysOrg from '/@/views/organized/dept/component/addSysOrg.vue';
import EditSysOrg from '/@/views/organized/dept/component/editSysOrg.vue';
import { delSysOrg, getSysOrgList, getSysOrgListByParentId } from '/@/api/organized/dept/index';

const addRef = ref();
const editRef = ref();
const filterName = ref('');
const treeRef = ref();

const state = reactive({
	orgTreeDate: [],
	tableData: {
		data: [],
		total: 0,
		loading: false,
	},
	params: {
		pageNum: 1,
		pageSize: 10,
		orgId: '',
		label: '',
		parentId: '',
		treePath: '',
		sortValue: '',
	},
});

const { orgTreeDate, tableData, params } = toRefs(state);

// 初始化表格数据
const initTableData = () => {
	getSysOrgList(state.params).then((res) => {
		state.tableData.data = res.data;
		state.tableData.total = res.extra.total;
	});
};

const initOrgTreeDate = (fn?: any) => {
	getSysOrgListByParentId({}).then((res: any) => {
		state.orgTreeDate = res.data;
		fn(res.data[0]);
	});
};

watch(filterName, (val) => {
	treeRef.value!.filter(val);
});

const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.label.indexOf(value) !== -1;
};

const nodeSelect = (data: any) => {
	state.params.parentId = data.orgId;
	initTableData();
};

const getChildren = (node: any, resolve: any) => {
	getSysOrgListByParentId({ parentId: node.key }).then((res: any) => {
		resolve(res.data);
	});
};

//分页大小改变
const onHandleSizeChange = (val: number) => {
	state.params.pageSize = val;
	initTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.params.pageNum = val;
	initTableData();
};

// 打开新增菜单弹窗
const openAddWindow = () => {
	addRef.value.openWindows();
};

const openEditWindow = (row: any) => {
	editRef.value.openWindows(row.orgId);
};

const delRow = (row: any) => {
	delSysOrg(row.orgId).then(() => {
		initTableData();
	});
};

// 页面加载时
onMounted(() => {
	initOrgTreeDate(nodeSelect);
});
</script>

<style scoped>
.dept_tree {
	margin-top: 10px;
	height: 99%;
}

el-tree-node__content {
}
</style>
